為了幫助新人更快速入手 code base，針對變數、函式、檔案、資料夾等名稱與位置都有相對應的規範，以下規範僅適用於我們團隊之中，並非業界標準，如有不同之處請鞭小力點ＸＤ

資料夾

type based

資料夾裡面的檔案屬於相同「類型」，例如按鈕、卡片、utility 等，那麼則是使用「複數」的方式命名。常用於後端或是 UI library 裏。

- buttons/
    CamelCast1Button.jsx
    CamelCast2Button.jsx
    CamelCast3Button.jsx
- cards/
    CamelCast1Card.jsx
    CamelCast2Card.jsx
    CamelCast3Card.jsx
- clients/
    RedisClient.jsx
    ApolloClient.jsx
    S3Client.jsx

domain based

資料夾裡面的檔案屬於相同「Domain」，利如權限、訂單等，則是使用 Domain 的名字來命名。常用於 React 的元件切分。

- payment/
    CheckoutButton.jsx
    CreditCardInput.jsx
- auth/
    LoginSection.jsx
    SignupSection.jsx

檔案

Class

使用 CamelCase 的方式進行命名，檔案名稱與類別名稱相同，並且檔案內僅能有一個 export，且為 default。若是裡面有其他的 export const，將進行額外拆分，詳見之後的 import/export 章節。除了 CamelCase 之外，命名上需注意前後詞的關係，例如 RedisClient 優於 ClientRedis，如同老虎麵是麵而不是老虎。

// RedisClient.js
class RedisClient {}
export default RedisClient;

React Component

不論是 functional component 還是 class component 都使用 CamelCase 來命名，並加上 jsx 或是 tsx 的副檔名。許多人會問說現在 react 只要使用 js 或是 ts 作為副檔名即可，為什麼還要使用舊版的命名模式？主要是因為這樣我們可以很容易從外層看出檔案是屬於元件還是一般的 Class，因為兩者都是 CamelCase 的格式，所以能更快速地進行開發。同上，命名需注意前後詞的關係，PrimaryCard 應優於 CardPrimary，因為他是卡片，所以裝飾性的項目放前面，本質放在後面。

// PrimaryCard.jsx
const PrimaryCard = () => {
  return <div>PrimaryCard</div>;
};
export default PrimaryCard;

// SecondaryCard.jsx
class SecondaryCard {
  render() {
    return <div>SecondaryCard</div>;
  }
}
export default SecondaryCard;

Multiple export

使用 camelCases 複數的方式進行命名，才能夠快速了解裡面有多個 export 的項目。

// converters.js
export const convertPrice = () => {};
export const convertDate = () => {};
export const convertLabel = () => {};

// utils.js
export const sendLog = () => {};
export const getTime = () => {};

其他

一律使用 camelCase 單數的方式進行命名，通常為常數等。

// countries.json
{
  "TW": { "name": "Taiwan" }
}

變數

常數 Constant

採用 UPPER_SNAKE_CASE 的方式命名，因為這樣可以最快的找到此變數，其他程式語言也有相同的習慣。

const MAX_RETREIES = 5;
const PORT = 5000;

函式 function

採用 camelCase() 的方式進行命名，由於我們大部分情況都是使用 Synchronize 的方式在開發，若是需要等待則需要命名的後綴加上 Async 來方便識別，跟 fs.readSync 有異曲同工之妙，若是沒有加上 Asyn 的話我們一律視為 Sync function。

const readFile = () => {};
const readFileAsync = async () => {};

此外在命名上需配合動詞優先的方式，意即 readFile 優於 fileRead。

其他

避免使用動詞，建議使用名詞或是形容詞、動名詞等，以「是否啟用」為例，enabled 優於 enable，另外若是 boolean 的話，使用 is 作為前綴字會更佳，例如 isEnabled 又優於 enabled。此外，不建議複數的變數直接加 s，容易看錯，建議使用 List, Collection 等字詞代替。

let exception;
let exceptions; // 不建議
let exceptionList; // 建議此方式